<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>my html test -- 菜鸟教程(runoob.com)</title>
</head>

<body>
    <!-- 在页面中的某个位置 -->
    <div id="section1">这是第1部分</div>
    <a name="section3">这是第3部分</a>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>

    <p> <a href="./index.html">此文本</a> 是一个指向本网站中的一个页面的链接。</p>
    </p>
    <p><a href="https://www.microsoft.com/">此文本</a> target=default 是一个指向万维网上的页面的链接。</p>
    <p> <a href="./index.html" target="_blank">此文本</a> target=_blank 是一个指向本网站中的一个页面的链接。</p>
    <p> <a href="./index.html" target="_self">此文本</a> target=_self 是一个指向本网站中的一个页面的链接。</p>
    <p> <a href="./index.html" target="_parent">此文本</a> target=_parent 是一个指向本网站中的一个页面的链接。</p>
    <p> <a href="./index.html" target="_top">此文本</a> target=top 是一个指向本网站中的一个页面的链接。</p>
    </p>

    <div id="section2">这是第2部分</div>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p>empty</p>
    <p><a href="https://www.bing.com" target="_blank" rel="noopener">新窗口打开 bing</a></p>

    <p><a href="https://www.bing.com" target="_blank" rel="noopener noreferrer">安全链接 bing</a></p>

    <!-- download 规定下载文件的新名称 -->
    <p><a href="tiny.txt" download="download tiny.txt">下载文件</a>
    </p>

    <p>
        <a href="https://www.bing.com" title="确实访问 bing 网站">访问 bing</a>
    </p>


    <!-- 链接到页面中的某个部分 -->
    <p> <a href="#section1">跳转到第1部分</a> </p>
    <p><a href="#section2">跳转到第2部分</a></p>
    <a href="#section3">跳转到第3部分</a>

    <p><a href="https://www.bing.com/es" hreflang="es">访问西班牙语网站</a></p>

    <p><a href="style.css" type="text/css">样式表</a></p>

    <p><a href="https://www.bing.com" class="external-link">外部链接</a></p>

    <p><a href="https://www.bing.com" style="color: red;">红色链接</a></p>

    <a href="https://www.bing.com">
        <img src="images/img1.jpg" alt="示例图片">
    </a>

    <p>创建图片链接:
        <a href="http://www.runoob.com/html/html-tutorial.html">
            <img border="10" src="images/img1.jpg" alt="HTML 教程" width="32" height="32"></a>
    </p>

    <p>无边框的图片链接:
        <a href="http://www.runoob.com/html/html-tutorial.html">
            <img border="0" src="images/img1.jpg" alt="HTML 教程" width="32" height="32"></a>
    </p>

    <p>跳出框架?
        <a href="http://www.runoob.com/" target="_top">点击这里!</a>
    </p>


    <p>跳出框架?
        <a href="http://www.runoob.com/" target="_blank">点击这里!</a>
    </p>

    <p>
        这是一个电子邮件链接：
        <a href="mailto:someone@163.com?Subject=Hello%20again" target="_top">
            发送邮件</a>
    </p>

    <p>
        <b>注意:</b> 单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。
    </p>


    <p>
        这是另一个电子邮件链接：
        <a href="mailto:someone@163.com?cc=someoneelse@163.com&bcc=andsomeoneelse@163.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!"
            target="_top">发送邮件!</a>
    </p>

    <p>
        <b>注意:</b> 单词之间的空格使用 %20 代替，以确保浏览器可以正常显示文本。
    </p>
</body>

</html>